<template>
  <div v-if="role_data && role_data.length != 0">
    <!-- 每个角色 -->
    <div class="role_item">
      <!-- 分两行 -->
      <!-- 第一行 图片 -->
      <div class="role_img_warp" v-for="item in role_data" :key="item._id" :style="{background:'url(' +getImgPath + 'img/Role/tab-role-bg.png) no-repeat top'}">
        <img :src="getImgPath + item.pb_path + '.png'">
        <!-- 第二行 名称 -->
        <p>{{item.role_name}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
  name:"RoleItem",
  props:["role_data"],
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    })
  },
}
</script>
<style lang="less" scoped>
  .role_item{
    width: 100%;
  }
  .role_img_warp{
    display: inline-block;
    font-size: 0.12rem;
    text-align: center;
    padding: 0rem 0.02rem;
    margin: 0rem 0.05rem;
    width: 0.77rem;
    height: 0.82rem;
    margin-left: 0.03rem;
    background-size: 100% !important;
    img{
      width: 100%;
    }
  }
</style>